Function: setOffScreen(domElementOrNodeArrayOrCSSSelector)

Description: Applies offscreen styling to any element.

Returns: domElement or matching node array, or $A object if chained.

Note: Offscreen styling is used to display element content to screen reader users that does not appear visually on the screen. This offscreen styling combination has been thoroughly tested to ensure the widest range of cross platform assistive technology support.

The CSS styles applied are those declared within the $A.sraCSSClear property.

    sraCSS: {
      position: "absolute",
      clip: "rect(1px 1px 1px 1px)",
      clip: "rect(1px, 1px, 1px, 1px)",
      clipPath: "inset(50%)",
      padding: 0,
      border: 0,
      height: "1px",
      width: "1px",
      overflow: "hidden",
      whiteSpace: "nowrap"
    }

These can be programmatically changed as needed.

Example:

// Using a DOM node as reference
var myElement = $A.setOffScreen(domElement);

// Using a DOM node array as reference
var myElementsArray = $A.setOffScreen([domElement1, domElement2]);

// Using a CSS selector as reference
var myElementsArray = $A.setOffScreen("button.for-mobile");

// Or the same using chaining

// Using a DOM node as reference
var myElement = $A(domElement).setOffScreen();

// Using a DOM node array as reference
var myElementsArray = $A([domElement1, domElement2]).setOffScreen();

// Using a CSS selector as reference
var myElementsArray = $A("button.for-mobile").setOffScreen();

// To return the modified element within a chain, use the "return()" method.

var myElement = myChain.return();